<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="adminCommon::common-header">
    <style>
        .card-body {
            background-color: #1a1a1a;
            border: none;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transform-origin: center;
            cursor: pointer;
        }
        .card mb-4:hover {
            background-color: rgba(255, 0, 255, 0.2);
        }
    </style>
</head>
<body class="sb-nav-fixed">
<nav th:replace="adminCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="adminCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">管理员主页</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active" style="color: #efbe02">主页</li>
                </ol>
                <div class="row">
                    <style>
                        /* 添加悬停效果 */
                        .card:hover {
                            transform: translateY(-3px);
                            box-shadow: 0 0 30px rgba(239, 190, 2, 0.7); /* 使用金色作为发光颜色 */
                            border-color: rgba(239, 190, 2, 0.5); /* 悬停时边框轻微变亮 */
                        }

                        /* 确保过渡平滑 */
                        .card {
                            will-change: transform, box-shadow;
                        }
                    </style>

                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="
                            background-color: #1a1a1a;
                            border: none;
                            border-radius: 10px;
                            transition: transform 0.3s ease, box-shadow 0.3s ease;
                            transform-origin: center;
                        ">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">健身房总人数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" th:text="${humanTotal}"></p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 10% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">员工人数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" th:text="${employeeTotal}"></p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 5% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">会员人数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" th:text="${memberTotal}"></p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 15% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card mb-4" style="background-color: #1a1a1a; border: none; border-radius: 10px;">
                            <div class="card-body">
                                <h5 class="card-title" style="color: #a0a0a0; font-size: 14px; margin-bottom: 10px;">器材数</h5>
                                <p class="card-text" style="color: #efbe02; font-size: 24px; font-weight: bold; margin-bottom: 5px;" th:text="${equipmentTotal}"></p>
                                <p style="color: #4CAF50; font-size: 12px; margin: 0;">
                                    <i class="fas fa-arrow-up"></i> 3% 本周
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-6">
                        <div class="card mb-4">
                            <div class="card-header" style="color: #000">
                                <i class="fas fa-chart-area me-1" style="color: #efbe02"></i>
                                6月份出入人员折线图
                            </div>
                            <div class="card-body">
                                <canvas id="myAreaChart" width="100%" height="40"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card mb-4">
                            <div class="card-header" style="color: #000">
                                <i class="fas fa-chart-bar me-1" style="color: #efbe02"></i>
                                近几个月健身总人数柱状图
                            </div>
                            <div class="card-body">
                                <canvas id="myBarChart" width="100%" height="40"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer th:replace="adminCommon::common-footer"></footer>
    </div>
</div>

<div th:include="adminCommon::common-scripts"></div>
</body>
</html>